var chartTrend
var graphTrend
var graphTrendLeft
var graphTrendRight
var graphTrendTop
var graphTrendBottom
var yAxisTrend
var xAxisTrend

var chartTrend_width
var chartTrend_height
var chartTrend_left
var chartTrend_top

var chartRanking_width
var chartRanking_height
var chartRanking_left
var chartRanking_top

var chartChange_width
var chartChange_height
var chartChange_left
var chartChange_top

var chartMap_width
var chartMap_height
var chartMap_left
var chartMap_top

var chartPie_width
var chartPie_height
var chartPie_left
var chartPie_top

var chartTrend_outer_topBottomPadding
var chartTrend_outer_leftRightPadding
var chartTrend_outer_width
var chartTrend_outer_height
var chartTrend_outer_left
var chartTrend_outer_top

var chartTrend_inner_topBottomPadding
var chartTrend_inner_leftRightPadding
var chartTrend_inner_width
var chartTrend_inner_height
var chartTrend_inner_left
var chartTrend_inner_top

var chartRanking_outer_topBottomPadding
var chartRanking_outer_leftRightPadding
var chartRanking_outer_width
var chartRanking_outer_height
var chartRanking_outer_left
var chartRanking_outer_top

var chartRanking_inner_topBottomPadding
var chartRanking_inner_leftRightPadding
var chartRanking_inner_width
var chartRanking_inner_height
var chartRanking_inner_left
var chartRanking_inner_top

var vpw = $(window).width()
var vph = $(window).height()

function initChart() {

    //create a rectangle for chart background fill
    var background_chart1sh = chart1sh.append("rect")
        .attr("id", "chart1shBackground")
        .attr("width", chartInnerWidth)
        .attr("height", chartInnerHeight)
        .attr("style", "fill: rgba(255,255,255,.9)")
        .attr("transform", translate1)

    // legend = d3.select('body')
    //     .append('svg')
    //     .attr('width',100)
    //     .attr('height',240)
    //     .attr('left',100)
    //     .attr('style','fill: rgba(0,0,0,0); position: absolute; top:555px; left:130px')

    // var color = ['#ffffd9','#edf8b0','#c7e9b4','#c7cdbb','#41b6c3','#1d91c0','#225ea8','#0c2c83']
    var color = ["#ff0000", "#be29ec", "#548f9f", "#a020f0", "#9bcd9b", "#b4eeb4", "#111111", "#ff0030"]

    // for (i = 0; i < 8; i ++) {
    //     legend.append('line')
    //         .attr('class','legend')
    //         .attr('x1',5)
    //         .attr('x2',85)
    //         .attr('y1',30 * i + 12.5)
    //         .attr('y2',30 * i + 12.5)
    //         .attr("stroke", color[i])
    //         .attr("stroke-width", "1.5px")
    // }

    for (i = 0; i < 8; i++) {
        disp_pll[i] = chart1sh.append("polyline")
            .attr("class", "disp_pll")
            .attr("stroke", color[i])
            .attr("fill", "none")
            .attr("transform", translate1)
            .attr("points", "")
            .attr("style", "z-index:100")
    }

    var xScale = d3.scaleTime()
        .domain([new Date("2019, 10, 1"), new Date("2019,10,2")])
        .range([0, chartTrend_width])

    var xAxis1sh_tick = d3.axisBottom(xScale)
        .tickArguments([d3.timeMinute.every(60)])
        .tickFormat(d3.timeFormat("%H:%M"))
    //.tickValues([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24])

    var xAxis1sh = chart1sh.append("g")
        .attr("class", "axisX")
        // .attr("transform", translate_xAxis)
        .call(xAxis1sh_tick)

    d3.selectAll("#temp_singleHeight_chart1 > g.axisX")
        .each(function () {
            d3.select(this).style("font-size", "15px")
        })
}

function sizeW(b0, b1, m) {
    // return 'calc(' + String(b1 - b0) + '%' + ' - ' + m + 'px)'
    return (b1 - b0) / 100 * vpw - m
}

function sizeH(b0, b1, m) {
    // return 'calc(' + String(b1 - b0) + '%' + ' - ' + m + 'px)'
    return (b1 - b0) / 100 * vph - m
}

function posW(b, m) {
    // return 'calc(' + String(b) + '%' + ' + ' + m + 'px)'
    return b / 100 * vpw + m
}

function posH(b, m) {
    return b / 100 * vph + m
}

function layout() {
    var vb0 = 0
    var vb1 = 70
    var vb1_1 = 50
    var vb1_2 = 70
    var vb2 = 70
    var vb3 = 100

    var hb0 = 0
    var hb1 = 100
    var hb2 = 46
    var m = 8

    // 3 parts of chartTrend
    chartTrend_width = sizeW(vb0, vb1, m)
    chartTrend_height = sizeH(hb0, hb1, m * 2)
    chartTrend_left = posW(vb0, m)
    chartTrend_top = posH(hb0, m)

    $('#chart-cont-trend')
        .css('width', chartTrend_width)
        .css('left', chartTrend_left)
        .css('height', chartTrend_height)
        .css('top', chartTrend_top)

    // chartTrend part 1
    chartTrend_outer_topBottomPadding = 10
    chartTrend_outer_leftRightPadding = 10
    chartTrend_outer_width = chartTrend_width * 0.8 - 2 * chartTrend_outer_leftRightPadding
    chartTrend_outer_height = chartTrend_height - 2 * chartTrend_outer_topBottomPadding
    chartTrend_outer_left = chartTrend_outer_leftRightPadding
    chartTrend_outer_top = chartTrend_outer_topBottomPadding

    chartTrend_inner_topPadding = 5
    chartTrend_inner_bottomPadding = 25
    chartTrend_inner_leftPadding = 45
    chartTrend_inner_rightPadding = 5
    chartTrend_inner_width = chartTrend_outer_width - chartTrend_inner_leftPadding - chartTrend_inner_rightPadding
    chartTrend_inner_height = chartTrend_outer_height - chartTrend_inner_topPadding - chartTrend_inner_bottomPadding
    chartTrend_inner_left = chartTrend_inner_leftPadding * 1
    chartTrend_inner_top = chartTrend_inner_topPadding * 1

    console.log(chartTrend_inner_left)
    $('#chart-trend')
        .css('width', chartTrend_outer_width)
        .css('left', chartTrend_outer_left)
        .css('height', chartTrend_outer_height)
        .css('top', chartTrend_outer_top)

    graphTrendLeft = chartTrend_inner_left + chartTrend_outer_left
    graphTrendRight = chartTrend_width - chartTrend_outer_left * 2 - chartTrend_inner_left
    graphTrendTop = chartTrend_inner_top + chartTrend_outer_top
    graphTrendBottom = graphTrendTop + chartTrend_inner_height - chartTrend_inner_top
    $('#graph-trend')
        .css('width', chartTrend_width - chartTrend_outer_left * 2 - chartTrend_inner_left)
        .css('left', graphTrendLeft)
        .css('height', chartTrend_inner_height - chartTrend_inner_top)
        .css('top', graphTrendTop)

    // $('#xAxis-trend')
    // .css('width', chartTrend_width - chartTrend_outer_left * 2 - chartTrend_inner_left)
    // .css('left', chartTrend_inner_left + chartTrend_outer_left)
    // .css('height', chartTrend_inner_height - chartTrend_inner_top)
    // .css('top', chartTrend_inner_top + chartTrend_outer_top)
    chartTrend = d3.select('#chart-trend')
    graphTrend = d3.select('#graph-trend')

    // chartTrend part 2
    chartRanking_outer_topBottomPadding = 10
    chartRanking_outer_leftRightPadding = 10
    chartRanking_outer_width = chartTrend_width * 0.2 - chartRanking_outer_leftRightPadding
    chartRanking_outer_height = chartTrend_height - 2 * chartRanking_outer_topBottomPadding
    chartRanking_outer_left = chartTrend_outer_leftRightPadding + chartRanking_outer_leftRightPadding + chartTrend_outer_width
    chartRanking_outer_top = chartTrend_outer_topBottomPadding

    chartRanking_inner_topPadding = 5
    chartRanking_inner_bottomPadding = 25
    chartRanking_inner_leftPadding = 30
    chartRanking_inner_rightPadding = 5
    chartRanking_inner_width = chartTrend_outer_width - chartRanking_inner_leftPadding - chartRanking_inner_rightPadding
    chartRanking_inner_height = chartTrend_outer_height - chartRanking_inner_topPadding - chartRanking_inner_bottomPadding
    chartRanking_inner_left = chartRanking_inner_leftPadding * 1
    chartRanking_inner_top = chartRanking_inner_topPadding * 1

    $('#chart-ranking')
        .css('width', chartRanking_outer_width)
        .css('left', chartRanking_outer_left)
        .css('height', chartRanking_outer_height)
        .css('top', chartRanking_outer_top)

    // 3 parts of chartChange
    // chartChange_width = sizeW(vb1, vb2, m)
    // chartChange_height = sizeH(hb0, hb1, m * 2)
    // chartChange_left = posW(vb1, m)
    // chartChange_top = posH(hb0, m)

    chartMap_width = sizeW(vb2, vb3, m * 2)
    chartMap_height = sizeH(hb0, hb2, m)
    chartMap_left = posW(vb2, m)
    chartMap_top = posH(hb0, m)

    chartPie_width = sizeW(vb2, vb3, m * 2)
    chartPie_height = sizeH(hb2, hb1, m * 2)
    chartPie_left = posW(vb2, m)
    chartPie_top = posH(hb2, m)

    $('#chart-cont-map')
        .css('width', chartMap_width)
        .css('left', chartMap_left)

        .css('height', chartMap_height)
        .css('top', chartMap_top)

    $('#chart-cont-pie')
        .css('width', chartPie_width)
        .css('left', chartPie_left)

        .css('height', chartPie_height)
        .css('top', chartPie_top)

        .attr('visibility', 'hidden')
}

function initChart1() {
    // chartTrend y-axis
    var translate_yAxis = 'translate(' + chartTrend_inner_left + ',' + '0' + ')'

    var yScale = d3.scaleLinear()
        .domain([50000, 0])
        .range([chartTrend_inner_top, chartTrend_inner_height])

    var yAxisTrend_tick = d3.axisLeft(yScale)
        .ticks(20)

    yAxisTrend = d3.select('#chart-trend')
        .append("g")
        .attr("class", "axisY")
        .attr("transform", translate_yAxis)
        .call(yAxisTrend_tick)
    d3.selectAll('.axisY .tick')
        .each(function () {
            stroke = $(this).children('line').attr('stroke')
            d3.select(this)
                .append('line')
                .attr('class', 'gratlinesY')
                .attr('x2', chartTrend_inner_width)
                .attr('stroke', stroke)
                .attr('stroke-dasharray', '3 3')
        })
    d3.selectAll("#chart-trend > g.axisY")
        .each(function () {
            d3.select(this)
                .style("font-size", "11.5px")
        })
    // chartTrend x-axis
    var translate_xAxis = 'translate(' + chartTrend_inner_left + ',' + chartTrend_inner_height + ')'
    var translate_xTicks = 'translate(-16, 8.5) rotate(-35)'

    var xScale = d3.scaleTime()
        .domain([new Date("2020, 1, 10"), new Date("2020,2,13")])
        .range([0, chartTrend_inner_width])

    var xAxisTrend_tick = d3.axisBottom(xScale)
        .tickArguments([d3.timeDay.every(1)])
        .tickFormat(d3.timeFormat("%m-%d"))

    xAxisTrend = d3.select('#chart-trend')
        .append("g")
        .attr("class", "axisX")
        .attr("transform", translate_xAxis)
        .call(xAxisTrend_tick)

    d3.selectAll("#chart-trend > g.axisX")
        .each(function () {
            d3.select(this)
                .style("font-size", "10.5px")
        })

    d3.selectAll(".axisX .tick")
        .each(function () {
            $(this).children('text').attr('transform', translate_xTicks)
        })

    d3.selectAll('.axisX .tick')
        .each(function () {
            stroke = $(this).children('line').attr('stroke')
            d3.select(this)
                .append('line')
                .attr('class', 'gratlinesX')
                .attr('y2', -chartTrend_inner_height)
                .attr('stroke', stroke)
                .attr('stroke-dasharray', '3 3')
        })
    // chartTrend inner chart
    var graphTrend_zoom = d3.zoom()
        .duration(250)
        .scaleExtent([0.9, 80])
        .translateExtent([[0, -20], [0, chartTrend_inner_height + 30]])
        .on('zoom', function () {
            trendTransf = d3.event.transform
            var newX = d3.event.transform.rescaleX(xScale);
            var newY = d3.event.transform.rescaleY(yScale);

            // update axes with these new boundaries
            yAxisTrend.call(
                d3.axisLeft(newY)
                    .ticks(20)
            )
            $('.gratlinesY').remove()
            d3.selectAll('.axisY .tick')
                .each(function () {
                    stroke = $(this).children('line').attr('stroke')
                    d3.select(this)
                        .append('line')
                        .attr('class', 'gratlinesY')
                        .attr('x2', chartTrend_inner_width)
                        .attr('stroke', stroke)
                        .attr('stroke-dasharray', '4 5')
                })
        })
    chartTrend.call(graphTrend_zoom)
}


function drawPll(data) {
    for (i = 0; i < data.length; i++) {
        if ((data[i]['admin-level'] == 'city') && (data[i]['province'] == '湖北省')) {
            console.log(data[i])
        }
    }

}
var color = ['#']
function drawPll(drawData) {
    var keyNum = Object.keys(drawData[0]['involved']).length
    for (i = 0; i < drawData.length; i++) {
        // console.log( drawData[i]['involved'])
        // console.log(keyNum, chartTrend_inner_width)
        var points = ''
        for (k = 0; k < keyNum; k++) {
            x = String((chartTrend_inner_width) / (keyNum - 1) * k)
            y = String((chartTrend_inner_height - chartTrend_inner_top) * (1 - drawData[i]['involved'][String(k)][4] / 50000))
            console.log(graphTrendRight - chartTrend_inner_width, k, x, chartTrend_inner_width)

            points += x + ',' + y
            if (k != drawData[i]['involved'].length - 1) {
                points += ' '
            }
            // console.log(points)
        }
        graphTrend.append("polyline")
            .attr("class", "trendPll")
            .attr("stroke", '#000000')
            .attr("fill", "none")
            .attr("points", points)
            .attr("style", "z-index:100")
    }
}

(function () {
    layout()
    initChart1()

    $.ajax({
        url: 'data/all.topojson',  //服务端接口地址
        type: "get",
        dataType: "json",
        success: function (res) {

            var drawData = []
            for (i = 0; i < res['objects']['combine_original_7']['geometries'].length; i++) {
                if (res['objects']['combine_original_7']['geometries'][i]['properties']['admin-level'] == 'city'
                    && res['objects']['combine_original_7']['geometries'][i]['properties']['province'] == '湖北省') {
                    drawData.push(res['objects']['combine_original_7']['geometries'][i]['properties'])
                }
            }

            drawPll(drawData)
        }
    })

    // initChart()
})()